<style lang="less">
    @import '../styles/menu.less';
</style>

<template>

    <Menu ref="sideMenu" :mode="horizontal" :active-name="$route.name" :open-names="openNames" :theme="menuTheme" width="auto"
          @on-select="changeMenu" style="z-index: 3;">
        <!-- <template v-for="item in menuList"> -->
        <template v-for="item in list">
            <!-- 路由只有一级显示 -->
            <!-- <MenuItem v-if="item.children.length<=1" :name="item.children[0].name">
                <Icon :type="item.icon" :size="iconSize"></Icon>
                <span class="layout-text">{{ itemTitle(item) }}</span>
            </MenuItem> -->
            <!-- 路由目录拥有子目录显示 -->
            <Submenu v-if="item.children.length > 0" :name="item.name">
                <template slot="title">
                    <Icon :type="item.icon" :size="iconSize"></Icon>
                    <span class="layout-text">{{ itemTitle(item) }}</span>
                </template>
                <template v-for="child in item.children">
                    <MenuItem v-show="child.show === undefined" :name="child.id + ',' + child.name">
                        <Icon :type="child.icon" :size="iconSize"></Icon>
                        <span class="layout-text">{{ itemTitle(child) }}</span>
                    </MenuItem>
                </template>
            </Submenu>
        </template>
    </Menu>
</template>

<script>
    export default {
        name: 'sidebarMenu',
        data () {
            return {
                list: []
            };
        },
        props: {
            horizontal: String,
            menuList: Array,
            iconSize: Number,
            menuTheme: {
                type: String
                // default: 'dark'
            },
            openNames: {
                type: Array
            }
        },
        mounted () {
            // depot.get({
            //     url: this.URL.BOSS_ORDER.MENUS,
            //     cb: (data) => {
            //         this.list.splice(0, this.list.length);
            //         data.data.forEach((item) => {
            //             let obj = {};
            //             obj.path = item.link;
            //             obj.icon = item.icon;
            //             obj.name = item.link.replace('/', '');
            //             obj.title = item.name;
            //             obj.remark = item.remark;
            //             obj.id = item.id;
            //             obj.children = [];
            //             item.children.forEach((item2, index2) => {
            //                 let obj2 = {};
            //                 obj2.path = item2.link;
            //                 obj2.icon = item2.icon;
            //                 obj2.name = item2.link;
            //                 obj2.title = item2.name;
            //                 obj2.remark = item2.remark;
            //                 obj2.id = item2.id;
            //                 if (item2.link === 'mallTemplate') {
            //                     obj2.show = false;
            //                 }
            //                 if (item2.link === 'goodsDetails') {
            //                     obj2.show = false;
            //                 }
            //                 if (item2.link === 'sellerDetails') {
            //                     obj2.show = false;
            //                 }
            //                 if (item2.link === 'shopCouponSon') {
            //                     obj2.show = false;
            //                 }
            //                 obj.children.push(obj2);
            //             });
            //             this.list.push(obj);
            //         });
            //         localStorage.pageOpenedListTwo = JSON.stringify(this.list);
            //     }
            // });
        },
        methods: {
            changeMenu (active) {
                if (!active) {
                    return;
                }
                let idAndName = active.split(',');
                // 添加最使用历史
                if (idAndName[0]) {
                    depot.post({
                        url: this.URL.USER.SAVE_MY_USE_HISTORY,
                        data: idAndName[0],
                        cb: (data) => {}
                    });
                }
                this.$emit('on-change', idAndName[1]);
            },
            itemTitle (item) {
                if (typeof item.title === 'object') {
                    return this.$t(item.title.i18n);
                } else {
                    return item.title;
                }
            }
        },
        updated () {
            this.$nextTick(() => {
                if (this.$refs.sideMenu) {
                    this.$refs.sideMenu.updateOpened();
                }
            });
        }

    };
</script>
